<template>
	<view class="p-[20rpx] stores">
		<view class="px-[20rpx]  bg-[#fff] rounded-[20rpx]">
			<view @click="goMap()" class="flex borderbototm justify-between items-center ">
				<view class="flex items-center py-[32rpx]">
					<view class="pr-[60rpx]  types">
						收货地址
					</view>
					<view class="flex-1 typess" v-if="addresslist.data.address !== ''">
						{{addresslist.data.address || '点击添加地址'}}
					</view>
					<view class="flex-1 typess text-[15px]" v-else style="color: #c0c4cc;">
						点击添加
					</view>
				</view>
				<view class="w-[40rpx] h-[38rpx] relative top-[2rpx]">
					<image class="w-[40rpx] h-[38rpx]" src="@/static/order/rightarrow.svg"></image>
				</view>
			</view>
			<view class="oneboder">

			</view>
			<view class="flex justify-between borderbototm h-[106rpx] items-center">
				<view class="flex items-center">
					<view class="pr-[60rpx] types ">
						门牌号码
					</view>
					<view class="flex-1 typess">
						<up-input border="none" placeholder="填写详细地址  例:1层2室"
							v-model="addresslist.data.doorNum"></up-input>
					</view>
				</view>
			</view>
			<view class="oneboder">

			</view>
			<view class="flex justify-between h-[106rpx]  borderbototm items-center">
				<view class="flex items-center ">
					<view class="pr-[60rpx] types">
						<text decode>标签&ensp;&ensp;&ensp;&ensp;</text>
					</view>
					<view class="flex ">
						<view @click="select(index)" class="mr-[20rpx]" v-for="(item,index) in ['家','公司','学校']"
							:key="index">
							<view class="home" :class="tabindex == index ? 'home1' : ''">{{item}}</view>
						</view>
					</view>
				</view>

			</view>
			<view class="oneboder">

			</view>
			<view class="flex justify-between  h-[106rpx]  borderbototm items-center">
				<view class="flex items-center ">
					<view class="pr-[60rpx] types">
						<text decode>联系人&ensp;&ensp;</text>
					</view>
					<view class="flex-1 typess">
						<up-input placeholder="请输入联系人" border="none" v-model="addresslist.data.realName"></up-input>
					</view>
					<view @click="changeIndex(item,index)" class="" v-for="(item,index) in ['先生','女士']" :key="index">
						<view class="flex items-center mr-[20rpx]">
							<view class="w-[32rpx] h-[32rpx] rounded-[50%] flex justify-center items-center border"
								:class="changees == index?'border-[#FE861C]':'border-[#DBDBDB]'">
								<view :class="changees == index ? ' bg-[#FE861C]' : ''"
									class="w-[20rpx] h-[20rpx]    rounded-[50%] ">
								</view>
							</view>
							<view class="ml-[10rpx] text-[28rpx]">{{item}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="oneboder">

			</view>
			<view class="flex justify-between  h-[106rpx] items-center">
				<view class="flex items-center">
					<view class="pr-[60rpx] types">
						手机号码
					</view>
					<view class="flex-1 typess">
						<up-input placeholder="请输入手机号" v-model="addresslist.data.phone" border="none"
							type="number"></up-input>
					</view>
				</view>


			</view>

		</view>
		<view class="h-[calc(var(--bottom-button-height)+5px)]"></view>
		<view @click="sendAddress()"
			class="my-0 py-[20rpx] px-[20rpx] w-full fixed left-0 bottom-[20rpx] box-border bg-[#F7F6FA]">
			<up-button color="#FE861C" :customStyle="{borderRadius:'20rpx',height:'98rpx',fontSize:'16px'}">
				保存地址
			</up-button>
			<!-- <view class="mt-[20rpx]">
			<up-button >
				删除地址
			</up-button>
		</view> -->

		</view>

	</view>
</template>

<script setup>
	import {
		newAddress
	} from '@/api/my.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'

	let addresslist = reactive({
		data: {
			address: '',
			doorNum: '',
			lable: '',
			phone: '',
			realName: '',
			sex: '',
			lng: '103.98171234130858',
			lat: '30.722372055053707'
		}

	})
	let tabindex = ref(null)
	let select = (index) => {
		if (tabindex.value == index) {
			tabindex.value = null
		} else {
			tabindex.value = index
		}
	}
	let changees = ref()
	let changeIndex = (item, index) => {
		changees.value = index
	}
	//保存地址
	let sendAddress = () => {
		let data = {
			address: addresslist.data.address,
			doorNum: addresslist.data.doorNum,
			lable: tabindex.value + 1,
			phone: addresslist.data.phone,
			realName: addresslist.data.realName,
			sex: changees.value + 1,
			lng: addresslist.data.lng,
			lat: addresslist.data.lat
		}
		console.log("发送数据", data);
		newAddress(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.navigateBack()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
	let goMap = () => {
		uni.chooseLocation({
			success: res => {
				console.log("res", res);
				if (!res.name || !res.address || !res.latitude || !res.longitude) return

				// addresslist.doorNum=res.name,
				addresslist.data.address = res.name,
					addresslist.data.lat = res.latitude,
					addresslist.data.lng = res.longitude
				console.log("获取地图数据", addresslist.data.address, addresslist.data.lat, addresslist.data
				.lng);

				// this.latitude = res.latitude
				// this.longitude = res.longitude
				// this.addressInfo = addressObj
			}
		});
	}
</script>

<style lang="scss">
	::v-deep .u-input__content__field-wrapper__field {
		font-weight: normal !important;
	}

	.stores {
		--bottom-button-height: 60px;
	}

	.types {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #1A1B1C;
	}

	.typess {
		// font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.home {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		background: #fff;
		box-shadow: 0 0 0 0.5px #efefef;
		width: 110rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		border-radius: 5rpx;
	}

	.borderbototm {
		// border-bottom: 1px solid #efefef;
	}

	.oneboder {
		border-bottom: 1px solid #efefef;
		transform: scaleY(.5);
	}

	.home1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		background: #FE861C;
		width: 110rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		border-radius: 5rpx;
		border: none;
	}
</style>